<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form
                inline
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-input
                    style="width: 220px"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-circle-plus"
                    type="primary"
                    @click="newSmsTemplate"
                  >
                    新增短信模板
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="模板名称"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="moduleKey"
                label="模块名称"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.moduleKey | keyText("MODULE") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="templateCode"
                label="模板"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{
                    scope.row.templateCode | keyText("SMS_TEMPLATE")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容"
                width="450"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="updateTime"
                label="更新时间"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editSmsTemplate(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delSmsTemplate(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog
      v-if="showSmsTemplate"
      :visible.sync="showSmsTemplate"
      title="新增/编辑短信模板:"
      width="700px"
      @close="close"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="views"
            :rules="rules"
            :model="formInfo"
            label-width="100px"
          >
            <el-form-item label="模板名称:" prop="name">
              <el-input
                v-model="formInfo.name"
                placeholder="请输入模板名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="模块:" prop="moduleKey">
              <el-select v-model="formInfo.moduleKey" placeholder="请选择">
                <el-option
                  v-for="item in smsTemplateKeys"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板" prop="templateCode">
              <el-select v-model="formInfo.templateCode" placeholder="请选择">
                <el-option
                  v-for="item in smsTemplates"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容:" prop="content">
              <el-input
                type="textarea"
                :rows="3"
                v-model="formInfo.content"
                placeholder="请输入模板内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                v-model="formInfo.remark"
                placeholder="请输入备注内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="钉钉消息图标:" prop="picUrl">
              <el-input
                v-model="formInfo.picUrl"
                placeholder="请输入钉钉消息图标"
              ></el-input>
            </el-form-item>
            <el-form-item label="钉钉消息Url:" prop="messageUrl">
              <el-input
                v-model="formInfo.messageUrl"
                placeholder="请输入钉钉消息Url"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="saveTemplate">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  created() {
    this.getPageData(1);
  },
  data() {
    return {
      searchDto: {
        pageIndex: 1,
        pageSize: 10,
        keywords: ""
      },
      pageData: {},
      loading: false,
      showSmsTemplate: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        moduleKey: [{ required: true, message: "请选择", trigger: "blur" }],
        templateCode: [{ required: true, message: "请选择", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }]
      },
      formInfo: {
        name: "",
        moduleKey: "",
        templateCode: "",
        content: "",
        remark: "",
        picUrl: "",
        messageUrl: ""
      },
      smsTemplateKeys: this.getDictionary("MODULE"),
      smsTemplates: this.getDictionary("SMS_TEMPLATE")
    };
  },
  watch: {},
  methods: {
    //获取分页
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getSmsTemplatePageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    //新增
    newSmsTemplate() {
      this.showSmsTemplate = true;
    },
    //编辑
    editSmsTemplate(row) {
      let tem = {
        id: row.id
      };
      this.API.getSmsTemplateById(tem).then(ret => {
        this.formInfo = ret.data;
      });
      this.showSmsTemplate = true;
    },
    //删除
    delSmsTemplate(row) {
      this.$confirm("确定删除当前短信模板", "提示", {}).then(() => {
        let tem = {
          id: row.id
        };
        this.API.deleteSmsTemplateById(tem).then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getPageData();
        });
      });
    },
    search() {
      this.getPageData(1);
    },
    clear() {
      this.searchDto = {
        pageIndex: 1,
        pageSize: 10,
        keywords: ""
      };
      this.getPageData(1);
    },
    //保存
    saveTemplate() {
      this.$refs["views"].validate(valid => {
        if (valid) {
          let tem = { body: this.formInfo };
          this.API.addOrUpdateSmsTemplate(tem).then(ret => {
            this.$message.success("操作成功");
            this.getPageData(1);
            this.close();
          });
        }
      });
    },
    close() {
      this.formInfo = {
        name: "",
        moduleKey: "",
        templateCode: "",
        content: "",
        remark: "",
        picUrl: "",
        messageUrl: ""
      };
      this.showSmsTemplate = false;
    }
  }
};
</script>
<style scoped></style>
